<template>
  <div id="app">
    <div class="my-process-designer">
      <div class="app-tools">
        <el-button-group key="file-control">
          <el-button
            icon="el-icon-upload2"
            @click="saveXml()"
            >保存</el-button
          >
          <el-button
            icon="el-icon-folder-opened"
            @click="$refs.refFile.click()"
            >打开文件</el-button
          >
          <input
            type="file"
            id="files"
            ref="refFile"
            style="display: none"
            accept=".xml, .bpmn"
            @change="importLocalFile"
          />
          <el-button
            @click="previewProcessXML"
            >预览XML</el-button
          >
          <el-button
            @click="previewProcessJson"
            >预览JSON</el-button
          >
        </el-button-group>
      </div>
      <div class="my-process-designer__container">
        <div class="my-process-designer__canvas" ref="bpmn-canvas"></div>
      </div>
    </div>

    <el-dialog
      title="预览"
      width="60%"
      :visible.sync="previewModelVisible"
      append-to-body
      destroy-on-close
    >
      <highlightjs :language="previewType" :code="previewResult" />
    </el-dialog>
  </div>
</template>

<script>
import BpmnModeler from "bpmn-js/lib/Modeler";
import ZeebeModdle from "zeebe-bpmn-moddle/resources/zeebe";
import ZeebeExtensionModule from "zeebe-bpmn-moddle/lib";
import customTranslate from "./utils/translations";
import xml from "./utils/xml";
import convert from "xml-js";
export default {
  name: "App",
  data() {
    return {
      BpmnModeler: null,
      previewModelVisible: false,
      previewResult: "",
      previewType: "xml",
    };
  },
  mounted() {
    this.initBpmnModeler();
    this.createNewDiagram(xml);
  },
  methods: {
    //
    saveXML() {

    },
     //导入文件
   importLocalFile() {
      const that = this
      const file = this.$refs.refFile.files[0];
      const reader = new FileReader();
      reader.readAsText(file);
      reader.onload = function () {
        let xmlStr = this.result;
        that.createNewDiagram(xmlStr);
      };
    },
    //预览xml
    previewProcessXML() {
      this.BpmnModeler.saveXML({ format: true }).then(({ xml }) => {
        this.previewResult = xml;
        this.previewType = "xml";
        this.previewModelVisible = true;
      });
    },
    //预览Json
    previewProcessJson() {
      this.BpmnModeler.saveXML({ format: true }).then(({ xml }) => {
        this.previewResult = convert.xml2json(xml, { spaces: 2 });
        this.previewType = "json";
        this.previewModelVisible = true;
      });
    },
    //初始化Bpmn
    initBpmnModeler() {
      const CustomTranslateModule = {
        translate: ["value", customTranslate],
      };
      this.BpmnModeler = new BpmnModeler({
        container: this.$refs["bpmn-canvas"],
        additionalModules: [CustomTranslateModule, ZeebeExtensionModule],
        moddleExtensions: {
          zeebe: ZeebeModdle,
        },
      });
      this.initEvent();
    },
    //
    createNewDiagram(xml) {
      this.BpmnModeler.importXML(xml);
    },
    //监听事件
    initEvent() {
      const eventBus = this.BpmnModeler.get("eventBus");
      // 监听选择事件，修改当前激活的元素以及表单
      eventBus.on("selection.changed", ({ newSelection }) => {
        console.log(newSelection[0]);
      });
    },
  },
};
</script>

